
import { ConfigProvider, App as AntdApp, ThemeConfig } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import {
    message as antdMessage,
    notification as antdNotification,
    Modal as antdModal,
    App,
} from "antd";

import type { MessageInstance } from "antd/es/message/interface";
import type { NotificationInstance } from "antd/es/notification/interface";
import type { ModalStaticFunctions } from "antd/es/modal/confirm";
import { ColorUtils } from '../../utils/color';



let message: MessageInstance = antdMessage;
let notification: NotificationInstance = antdNotification;

// because warn is deprecated, so we need to remove it.
const { warn, ...resetFns } = antdModal;
let modal: Omit<ModalStaticFunctions, "warn"> = resetFns;


// 默认主题颜色
const defaultThemeColor = '#1677ff';
// const defaultThemeColor = '#ff0000';



function EscapeAntd(): any {
    const staticFunctions = App.useApp();

    message = staticFunctions.message;
    notification = staticFunctions.notification;
    modal = staticFunctions.modal;

    return null;
}
interface IProps {
    children: JSX.Element,
    themeColor?: string,
}
/**
 * 自定义主题
 * @returns 
 */
function AntdTheme(props: IProps) {

    const colorPrimary = props.themeColor || defaultThemeColor;
    // antd mobile 主题
    document.documentElement.style.setProperty('--adm-color-primary', colorPrimary);
    document.documentElement.style.setProperty('--danger', '#ff4d4f');
    for (let i = 1; i < 10; i++) {
        // const color = Utils.hslToHex({ h, s, l: 10 * i });
        const colorA = ColorUtils.hexColorToAlpha(colorPrimary, 0.1 * i);
        const color = ColorUtils.transparentToNonTransparent(colorA, '#ffffff');
        document.documentElement.style.setProperty(`--primary${i}`, color);
    }


    // antd 主题
    const antdTheme: ThemeConfig = {
        token: {
            colorPrimary: colorPrimary,
            colorInfo: colorPrimary,
        },
        components: {
            Image: {
                /** 预览浮层 z-index */
                // zIndexPopup: 2000,
            },
            Popconfirm: {
                /* 确认框 z-index */
                // zIndexPopup: 1000,
            },
        },
    };

    return (
        <ConfigProvider theme={antdTheme} locale={zhCN}>
            <AntdApp>
                {props.children}
                <EscapeAntd />
            </AntdApp>
        </ConfigProvider>
    )
}

export {
    message,
    notification,
    modal,
}

export default AntdTheme;